<template>
  <div class="app">
    <div class="home_box">
      <el-main>
        <div id="main_category1" ref="main" style="height: 230px;width:600px;"></div>
      </el-main>
    </div>
  </div>
</template>
<script>
import { onMounted } from 'vue';
import * as echarts from "echarts";
export default {
  components: {
  },
  setup() {
    onMounted(() => {
      let myChart = echarts.init(document.getElementById("main_category1"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: '曲线图',
          textStyle: {
            fontSize: 15, //字体大小
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['Email', 'Union Ads'],
          itemHeight: 10,
          icon: 'circle'
        },
        grid: {
          left: '8%',
          right: '12%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            symbol: 'circle',
            symbolSize: 7,
            color: '#45b33b',
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#e2e3da'
                }
              ])
            },
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: [0, 300, 350, 400, 90, 230, 0]
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            symbol: 'circle',
            symbolSize: 7,
            color: '#21a8ff',
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#c5e8ff'
                }
              ])
            },
            smooth: true,
            emphasis: {
              focus: 'series'
            },
            data: [0, 182, 200, 100, 300, 330, 0],
          }
        ]
      });
    });
  },
  data() {
    return {
    };
  },
  methods: {
  }
};
</script>
<style>
.app {
  margin: 0;
}
</style>